<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>文本比较工具</title>
	<link rel="icon" href="icon.ico" />
	<script type="text/javascript" src="./js/dojo.js"></script>
	<script type="text/javascript" src="./js/diffview.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/diffview.css">
	<script type="text/javascript" src="./js/difflib.js"></script>
	<script language="javascript">
		var $ = dojo.byId;
		dojo.require("dojo.io");
		var url = window.location.toString().split("#")[0];
		function diffUsingJS() {
			var base = difflib.stringAsLines($("baseText").value);
			var newtxt = difflib.stringAsLines($("newText").value);
			var sm = new difflib.SequenceMatcher(base, newtxt);
			var opcodes = sm.get_opcodes();
			var diffoutputdiv = $("diffoutput");
			while (diffoutputdiv.firstChild) {
				diffoutputdiv.removeChild(diffoutputdiv.firstChild);
			}
			var contextSize = $("contextSize").value;
			contextSize = contextSize ? contextSize : null;
			diffoutputdiv.appendChild(diffview.buildView({
				baseTextLines: base,
				newTextLines: newtxt,
				opcodes: opcodes,
				baseTextName: "Base Text",
				newTextName: "New Text",
				contextSize: contextSize,
				viewType: $("inline").checked ? 1 : 0
			}));
			window.location = url + "#diff";
		}
		function diffUsingPython() {
			dojo.io.bind({
				url: "/diff/postYieldDiffData",
				method: "POST",
				content: {
					baseText: $("baseText").value,
					newText: $("newText").value,
					ignoreWhitespace: "Y"
				},
				load: function (type, data, evt) {
					try {
						data = eval('(' + data + ')');
						while (diffoutputdiv.firstChild) {
							diffoutputdiv.removeChild(diffoutputdiv.firstChild);
						}
						$("output").appendChild(diffview.buildView({
							baseTextLines: data.baseTextLines,
							newTextLines: data.newTextLines,
							opcodes: data.opcodes,
							baseTextName: data.baseTextName,
							newTextName: data.newTextName,
							contextSize: contextSize
						}));
					} catch (ex) {
						alert("An error occurred updating the diff view:" + ex.toString());
					}
				},
				error: function (type, evt) {
					alert('Error occurred getting diff data. Check the server logs.');
				},
				type: 'text/javascript'
			});
		}
	</script>

</head>

<body>
	<div align="center">
		<table border="0" width="900" id="table1">
			<tr>
				<td>
					<input type="hidden" id="contextSize">
					<h3>Base Text（基础文本）</h3>
					<textarea id="baseText" style="width:900px;height:100px"></textarea>
					<h3>New Text（对比文本）</h3>
					<textarea id="newText" style="width:900px;height:100px"></textarea>
					<div>
						<input type="radio" name="_viewtype" id="sidebyside">
						<label for="sidebyside">左右并排</label>
						<input type="radio" name="_viewtype" checked="checked" id="inline">
						<label for="inline">上下对比</label>
						<input type="button" value="开始对比" onclick="javascript:diffUsingJS();">
					</div>
					<div>
						<a name="diff" />
						<div id="diffoutput" style="width:100%" />
					</div>
				</td>
			</tr>
		</table>
	</div>
</body>

</html>